/* eslint-disable no-unused-vars */
import React, { Component } from "react";
import "./xhfOpenResult.scss";
import { connect } from "react-redux";
import XFButton from "../../../xfCompontent/xfButton/xfButton";
import { setUserType } from "../../../Redux/Action/credit/AuthenticationA";
import rhmyr from "../../../images/imageXHF/rhmyr.png";
import rhzcr from "../../../images/imageXHF/rhzcr.png";
import XFModal from "../../../xfCompontent/xfModal/xfModal";
import SendMSGCode from "../../../component/sendMSGCode/sendMSGCode";
import { InterfaceG, agreements_url } from "../../../config/Config";
import yhTools from "../../../tools/yh";
import { Checkbox, Toast } from "antd-mobile";
import MainLayout from "../../../component/mainLayout/mainLayout";
import {
	getAppPlatformsDatas,
	getPayDatas
} from "../../../Redux/Action/nativeDatas/nativeDatas";
const AgreeItem = Checkbox.AgreeItem;
class XhfOpenResult extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isShowModal: false,
			btnText: "立即使用",
			isDisabled: true,
			amount: "",
			billDay: 15,
			rtnDay: 20,
			showMsgBox: false
		};
	}

	componentDidMount() {
		const data = this.props.location.state ? this.props.location.state : {};
		const amount = data.amount;
		const billDay = data.billDay;
		const rtnDay = data.rtnDay;
		this.setState({
			amount,
			billDay,
			rtnDay
		});
	}

	componentWillUnmount() {}
	btnFn() {
		if (this.state.isDisabled) {
			return false;
		}
		this.islianlianSign(false);
	}

	//提交回调
	submitCode(code) {
		this.vSignXhContract(code);
	}

	islianlianSign(isAgainSendYZM) {
		let objs = {
			url: InterfaceG.signXhContract,
			params: {
				lnid: this.props.getAppPlatformsDatas.lnid,
				applyNo: this.props.getAppPlatformsDatas.applyNo
			},
			_alertShow: false
		};
		let _that = this;
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				_that.sendCode.countdown();
				const pageNo = res.data.pageNo;
				_that.orderNo = res.data.orderNo;
				if (pageNo == "pop") {
					//弹框
					_that.setState({
						showMsgBox: true,
						phone: res.data.phone
					});
				} else if (pageNo == "password") {
					//去设置密码
					_that.props.history.push({
						pathname: "/setPayPwd",
						state: {
							gotoNext: "fkm"
						}
					});
				} else if (pageNo == "payBarCode") {
					//去支付码页面
					yhTools
						.openPayView({
							"Auth-Header": this.props.getAppPlatformsDatas.authHeaderStr
						})
						.then(res => {
							let data = res.data;
							if (res.status == "1000") {
								if (res.platform) {
									data = JSON.parse(res.data);
								}
								if (data.data.result == "1") {
									// 金额和商户名称存入redux
									_that.props._getPayDatas({
										cashBackAmount: data.data.cashBackAmount, //红包金额
										goodsAmount: data.data.goodsAmount, //商品金额
										couponAmount: data.data.couponAmount, //优惠券金额
										randomAmount: data.data.randomAmount, //随机立减金额
										amount: data.data.amount, //实付金额
										storeName: data.data.storeName //商户名称
									});
									window.location.replace("#/paySuccess");
								} else if (data.data.result == "2") {
									_that.props._getPayDatas({
										failureReason: data.data.failureReason || "" //支付失败原因
									});
									window.location.replace("#/payFail");
								}
							} else if (res.status == "99999") {
								let authHeader = _that.props.getAppPlatformsDatas;
								authHeader.userToken = ""; //用户token
								authHeader.isLogin = "0"; //"0"表示未登录“1”表示已登录;
								_that.props._getAppPlatformsDatas(authHeader);
							}
						});
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	//签订循环合同，及协议支付接口
	vSignXhContract(code) {
		console.log("mesCode:", code);
		let objs = {
			url: InterfaceG.vSignXhContract,
			params: {
				verifyCode: code,
				orderNo: this.orderNo,
				lnid: this.props.getAppPlatformsDatas.lnid,
				applyNo: this.props.getAppPlatformsDatas.applyNo
			},
			_alertShow: false
		};
		let _that = this;
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const pageNo = res.data.pageNo;
				if (pageNo == "password") {
					//去设置密码
					_that.props.history.push({
						pathname: "/setPayPwd",
						state: {
							gotoNext: "fkm"
						}
					});
				} else if (pageNo == "payBarCode") {
					//去支付码页面
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	gotoXyPage(type) {
		if (type == "1") {
			this.props._setUserType({ personalContract: "1" }); //循环额度额度合同页面签署合同标记：0-签署（返回首页），1-不签署（返回计算额度）
			// window.location.replace("#/personalCreditAmountContract");//打开个人循环额度合同
			this.props.history.push({
				pathname: "/iframeAgreements",
				state: {
					src: agreements_url + "/xhfCreditPaymentContract.html",
					title: "个人循环授信借款合同"
				}
			});
		} else {
			//打开支付协议页面
			this.props.history.push("/agreementoflianyintong");
		}
	}

	agree(e) {
		const isAgree = e.target.checked;
		this.setState({
			isDisabled: !isAgree
		});
	}

	handleModal() {
		this.setState({
			isShowModal: true
		});
	}

	handleModalBtn(type) {
		if (type == "live") {
			this.props.history.push({
				pathname: "/xhfHomeCredit",
				state: {
					fromUrl: "openResult"
				}
			});
		} else {
			this.setState({
				isShowModal: false
			});
		}
	}

	cancleModal() {
		this.setState({
			isShowModal: false
		});
	}

	closeSendModal() {
		this.setState({
			showMsgBox: false
		});
	}

	//获取验证码
	sendYzm() {
		this.islianlianSign(true);
	}

	render() {
		const {
			btnText = "",
			isDisabled,
			billDay,
			rtnDay,
			amount,
			isShowModal,
			showMsgBox
		} = this.state;
		let _pageParams = {
			header: {
				title: "开通结果",
				goBackPath: "/xhfHomeCredit"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			isModal: true
		};

		return (
			<MainLayout
				pageParams={_pageParams}
				handleBack={this.handleModal.bind(this)}
			>
				<div className="openResult">
					<div className="box">
						<div className="banner"></div>
						<div className="content">
							<p>恭喜你</p>
							<p className="get-monery">获得小辉付额度</p>
							<h3>{amount}</h3>
							<div className="xhf-index-btn">
								<XFButton
									isDisabled={isDisabled}
									handleBtn={this.btnFn.bind(this)}
									btText={btnText}
								/>
							</div>
							<div className="agree">
								<AgreeItem data-seed="logId" onChange={this.agree.bind(this)}>
									本人同意并签署
								</AgreeItem>
								<span onClick={this.gotoXyPage.bind(this, "1")}>
									《个人循环授信借款合同》
								</span>
								<span onClick={this.gotoXyPage.bind(this, "2")}>
									《连连银通银行卡支付服务协议》
								</span>
							</div>
						</div>
					</div>
					<div className="openResult-conter">
						<div className="openResult-conter-item">
							<img src={rhmyr} />
							<p className="item-text">每月{billDay}日出账</p>
							<p>提醒短信发预留手机号</p>
						</div>
						<div className="openResult-conter-item">
							<img src={rhzcr} />
							<p className="item-text">最迟{rtnDay}日还款</p>
							<p>自动从还款卡扣款</p>
						</div>
					</div>
					<XFModal
						handleBtn={this.handleModalBtn.bind(this)}
						isShowModal={isShowModal}
					/>
					<SendMSGCode
						sendSuccessPhone={this.state.phone}
						ref={ref => {
							this.sendCode = ref;
						}}
						getYZMCode={this.sendYzm.bind(this)}
						submitCode={this.submitCode.bind(this)}
						closeSendModal={this.closeSendModal.bind(this)}
						showMsgBox={showMsgBox}
					/>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_setUserType: options => {
			dispatch(setUserType(options));
		},
		_getAppPlatformsDatas: abj => {
			//获取native的数据
			dispatch(getAppPlatformsDatas(abj));
		},
		_getPayDatas: options => {
			dispatch(getPayDatas(options));
		}
	};
}

const XhfOpenResultPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(XhfOpenResult);
export default XhfOpenResultPage;
